<template>
  <navigation class="fixed top-0 left-0 right-0 z-50"></navigation>
  <div class="flex min-h-screen pt-16">
    <el-menu
      class="w-64 min-h-screen bg-gradient-to-b from-blue-400 to-blue-100"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <div class="p-4 border-b border-white">
        <div class="flex items-center space-x-2">
          <el-icon><CheckmarkCircle /></el-icon>
          <span class="text-lg font-semibold text-white">认证中心</span>
        </div>
      </div>
      <el-menu-item
        v-for="(item, index) in navItems"
        :key="index"
        :index="String(index)"
        class="!rounded-button"
        :route="item.route"
      >
        <el-icon><component :is="item.icon" /></el-icon>
        <span class="text-white">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
    <div class="flex-1 p-6">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Trophy, Connection, Briefcase, Calendar, User, Tools } from '@element-plus/icons-vue';
import navigation from "../../navigation.vue"

const activeIndex = ref('0');
const navItems = ref([

  { name: '比赛认证', icon: Trophy, route: '/certificateAuthority/competition' },
  { name: '项目认证', icon: Connection, route: '/certificateAuthority/project-experience' },
  { name: '实习认证', icon: Briefcase, route: '/certificateAuthority/internship-experience' },
  { name: '活动认证', icon: Calendar, route: '/certificateAuthority/activity' },
  { name: '通用技能', icon: Tools, route: '/certificateAuthority/skills' },
  { name: '特殊人群', icon: User, route: '/certificateAuthority/special-group' },
]);

const router = useRouter();

const handleSelect = (index: string) => {
  activeIndex.value = index;
  router.push(navItems.value[parseInt(index)].route);
};
</script>

<style scoped>
.rounded-button {
  border-radius: 999px;
}

.el-menu {
  border-right: none;
}

.el-menu-item {
  padding-left: 20px;
}

.el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>